<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/logon.css">
    <script src="./js.js"></script>
</head>

<body>
    <div class="content">
        <p>Log On</p>
        <div class="user">
            <span>user</span>：<input type="text" class="user1">
        </div>
        <div class="password">
            <span>password</span>：<input type="password" class="password1">
        </div>
        <div class="box"><input type="checkbox" class="setuser">记住用户名</div>
        <div class="event">
            <button>登录</button><button>注册</button>

        </div>
    </div>
    <div class="register">
        <p>Register</p>
        <div class="user">
            <span>setuser</span>：<input type="text" class="user1">
        </div>
        <div class="password">
            <span>setpassword</span>：<input type="password" class="password1">
        </div>
        <!-- <div class="box"><input type="checkbox">记住用户名</div> -->
        <div class="event">
            <button>提交</button><button>返回</button>

        </div>
    </div>

    <script>
        function getClass(name, a) {
            return document.getElementsByClassName(name)[a];
        }
        let user1 = getClass("user1", 0);
        let user2 = getClass("user1", 1);
        let password1 = getClass("password1", 0);
        let password2 = getClass("password1", 1);
        let setuser = getClass("setuser", 0);
        let logon = document.getElementsByTagName("button")[0];
        let register = document.getElementsByTagName("button")[1];
        let submit = document.getElementsByTagName("button")[2];
        let rtn = document.getElementsByTagName("button")[3];
        let content = getClass("content", 0);
        let Register = getClass("register", 0);

        function timi() {
            return JSON.parse(localStorage.userName);
        }
        if (localStorage.userName) {
            if (JSON.parse(localStorage.userName).checked) {
                user1.value = timi().getUser;
                setuser.checked = timi().checked;
            }
        }

        let regular = /.{6,13}/;

        function ti(a) {
            return timi().user.indexOf(a);
        }
        // console.log(localStorage.password == password1.value)
        logon.onclick = function() {
            if (localStorage.userName) {
                if (timi().user.includes(user1.value) && password1.value == timi().password[ti(user1.value)]) {
                    if (setuser.checked) {
                        // alert("11");
                        let userName = timi();
                        userName.checked = true
                        userName.getUser = user1.value;
                        localStorage.userName = JSON.stringify(userName);
                    }
                    let userName = timi();
                    userName.getUser = user1.value;
                    localStorage.userName = JSON.stringify(userName);
                    alert("登录成功");

                    location.href = "../index.html";
                    user1.value = "";
                    password1.value = "";
                } else {
                    // console.log(setuser.checked == true);
                    alert("错误指令，登录失败,请检查账号密码");
                    password1.value = "";
                }
            }


        }
        register.onclick = function() {
            content.style.display = "none";
            Register.style.display = "block";
        }
        submit.onclick = function() {
            if (user2.value != "" && password2.value != "") {
                if (regular.test(user2.value) && regular.test(password2.value)) {
                    // localStorage.userName = user2.value;
                    if (localStorage.userName) {
                        if (timi().user.includes(user2.value)) {
                            alert('用户名已存在');
                        } else {
                            let userName = JSON.parse(localStorage.userName);
                            userName.user.push(user2.value);
                            userName.password.push(password2.value);
                            console.log(userName);
                            localStorage.userName = JSON.stringify(userName);
                            alert("注册成功");
                            user2.value = '';
                            password2.value = '';
                            Register.style.display = "none";
                            content.style.display = "block";
                        }
                    } else {
                        let username = {
                            "user": [user2.value],
                            "password": [password2.value],
                            "checked": false,
                            "getUser": 0
                        }
                        localStorage.userName = JSON.stringify(username);
                        alert("注册成功");
                        user2.value = '';
                        password2.value = '';
                        Register.style.display = "none";
                        content.style.display = "block";
                    }
                } else {
                    alert("格式不正确，请检查格式后重新提交")
                }
            } else {
                alert("输入不能为空");
            }
        }
        rtn.onclick = function() {
            Register.style.display = "none";
            content.style.display = "block";
        }
    </script>
</body>

</html>